<template>
    <d2-container>
        <div class="muse_table_box">
            <div class="muse_control_box">
                <el-button class="muse_float_left" type="primary" @click="addData">添加</el-button>
            </div>
            <el-table
                    :data="showData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column prop="title" label="主标题"/>
                <el-table-column prop="subtitle" label="子标题"/>
                <el-table-column prop="createdAt" label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.createdAt | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="推荐列表" :visible.sync="dialogDataVisible">
            <el-table :data="tableData"
                      width="100%"
                      ref="ref_table"
                      @select="handleSelectionChangeByDialog">
                <el-table-column fixed type="selection" width="55"/>
                <el-table-column prop="title" label="主标题"/>
                <el-table-column prop="subtitle" label="子标题"/>
                <el-table-column prop="createdAt" label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.createdAt | date('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogDataVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRecommendationPage">确 定</el-button>
            </span>
        </el-dialog>
    </d2-container>
</template>

<script>
  import tableMixin from '../mixins/tableMixin'
  // import { getRecommendationList, addRecommendationPage, deleteRecommendationPage } from '@/api/admin'
  export default {
    name: 'activityList',
    mixins: [tableMixin],
    data () {
      return {
        dialogDataVisible: false,
        tableData: [],
        showData: [],
        tempShowData: []
      }
    },
    created () {
      this.getRecommendationList()
    },
    methods: {
      async getRecommendationList() {
        const params = {
          pageType: 'store'
        }
        const { code, data: { data } } = await getRecommendationList(params)
        this.showData = data
        this.tempShowData = data
      },
      // 获取列表数据
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }
        params = Object.assign({}, params, this.form)
        const { code, data: { total, currentPage, data, pageSize } } = await getRecommendationList(params)
        if(code === 200) {
          this.paging.total = total
          this.paging.pageSize = pageSize
          this.paging.page = currentPage
          this.tableData = data

          const showAry = this.tableData.filter(item => {
            for(let i = 0; i < this.tempShowData.length; i++) {
              if(item._id === this.tempShowData[i]._id) {
                return true
              }
            }
          })

          this.$nextTick(() => {
            showAry.forEach(item => {
              this.$refs.ref_table.toggleRowSelection(item, true)
            })
          })
        }
      },
      // 添加数据
      addData () {
        this.tempShowData = this.showData
        this.dialogDataVisible = true
        this.getTableData()
      },
      // 弹框选择项编辑
      handleSelectionChangeByDialog(valueAry, value) {
        this.tempShowData = this.tempShowData.map(item => {
          return JSON.stringify(item)
        })
        if (this.tempShowData.indexOf(JSON.stringify(value)) > -1) {
          this.tempShowData.splice(this.tempShowData.indexOf(JSON.stringify(value)), 1)
        } else {
          this.tempShowData.push(JSON.stringify(value))
        }
        this.tempShowData = this.tempShowData.map(item => {
          return JSON.parse(item)
        })
      },
      async addRecommendationPage() {
        const tempIds = []
        this.tempShowData.forEach(item => {
          tempIds.push(item._id)
        })
        const params = {
          page: 'store',
          id: tempIds
        }
        const res = await addRecommendationPage(params)
        this.getRecommendationList()
        this.dialogDataVisible = false
      },
      deleteRow(row) {
        this.wrapConfirm(4).then( async () => {
          const res =  await deleteRecommendationPage({id: row._id, page: 'store'})
          this.getRecommendationList()
        }).catch(() => {})
      }
    }
  }
</script>

<style scoped>

</style>
